<template>
  <div class="container">
    <div class="clearfix">
      <span>模板配置页</span>
      <span class="r">
        <el-button class="r pan-btn green-btn sm-btn"
                   size="small"
                   icon="el-icon-refresh"
                   @click="refresh"></el-button>
      </span>
    </div>
    <div class="con clearfix">
      <div class="">
        <el-tabs v-model="pageModel"
                 type="card"
                 @tab-click="handleClick">
          <el-tab-pane label="信息编辑"
                       name="msgEdit">
            <msgEdit v-bind:json="json"
                     v-on:listenMsgEdit="MsgEditData"></msgEdit>
          </el-tab-pane>
          <el-tab-pane label="条件设置"
                       v-if="hideSetFlag"
                       name="condtion">
            <condition v-bind:json="json"
                       v-on:listenMsgEdit="condition"></condition>
          </el-tab-pane>
          <el-tab-pane label="商品设置"
                       v-if="hideSetFlag"
                       name="productSet">
            <productSet v-on:listenPrizeEdit="productSet"
                        v-bind:json="json"></productSet>
          </el-tab-pane>
          <el-tab-pane label="商品类型"
                       v-if="hideSetFlag"
                       name="productType">
            <productType v-bind:json="json"
                         v-on:listenPrizeEdit="productType"></productType>
          </el-tab-pane>
          <el-tab-pane label="商品列表"
                       v-if="hideSetFlag"
                       name="prizeList">
            <productList v-on:listenPrizeEdit="productList"
                         v-bind:json="json"></productList>
          </el-tab-pane>
          <el-tab-pane label="图片设置"
                       v-if="hideSetFlag"
                       name="productImgSet">
            <productImgSet v-bind:json="json"
                           v-on:listenPrizeEdit="productImgSet"></productImgSet>
          </el-tab-pane>
          <!-- <el-tab-pane label="题库列表"
                       v-if="hideSetFlag"
                       name="dailyEdit">
            <dailyEdit v-bind:json="json"></dailyEdit>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <div class="con-right r"></div>
    </div>
  </div>
</template>
<script>
import { param2Obj } from '@/utils/index'
import msgEdit from '@/views/components/template-components/msgEdit'
import condition from '@/views/components/template-components/condition'
import productSet from '@/views/components/template-components/productSet'
import productType from '@/views/components/template-components/productType'
import productList from '@/views/components/template-components/productList'
import productImgSet from '@/views/components/template-components/productImgSet'

export default {
  name: 'bargain',
  data() {
    return {
      hideSetFlag: false,
      msgInfoStatus: null,
      modelName: '',
      pageModel: 'msgEdit',
      json: { // ///用于子组件获取数据
        activityId: '',
        templateId: '',
        pageModel: 'msgEdit',
        prizeId: '',
        editFlag: false,
        id: '',
        templateMark: ''
      }
    }
  },
  props: ['templateMark'],
  mounted() {
    this.modelName = param2Obj(window.location.href).name;
    this.json.templateId = param2Obj(window.location.href).templateId;
    this.json.activityId = param2Obj(window.location.href).activityId;
    this.json.prizeId = param2Obj(window.location.href).prizeId;
    this.json.editFlag = param2Obj(window.location.href).editFlag;
    this.json.templateMark = param2Obj(window.location.href).type;
    console.log(this.json.templateMark)
  },
  components: {
    msgEdit,
    condition,
    productSet,
    productList,
    productImgSet,
    productType
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      this.json.pageModel = tab.name
      console.log(this.json.pageModel)
      /*
      * 奖品 tab 切换
      * 奖品配置内容一样  即  form  提交一样 内容一样
      * */
    },
    MsgEditData(data) {
      this.hideSetFlag = data.hideSetFlag
      this.json.activityId = data.activityId
      this.pageModel = data.pageModel
      this.json.pageModel = data.pageModel
    },
    condition(data) {
      console.log(data)
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'condition'
    },
    productType(data) {
      console.log(data)
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'productType'
    },
    productSet(data) {
      console.log(data)
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'productSet'
    },
    productList(data) {
      console.log(data)
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'productList'
    },
    productImgSet(data) {
      console.log(data)
      this.pageModel = data.pageModel
      this.json.prizeId = data.prizeId
      this.hideSetFlag = data.hideSetFlag
      this.json.pageModel = 'productImgSet'
    },
    refresh() {
      this.$router.go(0)
    }
  }
}
</script>
<style>
.inline-form .el-form-item__content {
  width: 210px;
}

.img-label .el-form-item__content {
  width: 500px;
}

.con-left {
  width: 75%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
